<template>
  <div class="dropDown">
    <van-dropdown-menu>
      <!-- 选择城市 -->
      <van-dropdown-item title="北京">
        <van-search
          class="city"
          v-model="city"
          placeholder="请输入城市名字"
          shape="round"
          background="#F7F4F5"
        />

        <!-- 城市索引栏 -->
        <van-index-bar :index-list="indexList">
          <div v-for="(item, index) in 9" :key="index">
            <van-index-anchor index="1" style="background: #f7f4f5">{{
              index === 0 ? '热门' : indexList[index]
            }}</van-index-anchor>
            <van-cell title="文本" v-for="(item, index) in 3" :key="index" />
          </div>
        </van-index-bar>
      </van-dropdown-item>

      <!-- 选择职位 -->
      <van-dropdown-item title="技术经理">
        <van-search
          class="role"
          v-model="role"
          placeholder="请输入职位"
          shape="round"
          background="#F7F4F5"
        />
        <van-cell title="文本" v-for="(item, index) in 9" :key="index" />
      </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      city: '',
      role: '',
      indexList: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]
    }
  }
}
</script>

<style lang="less" scoped>
.dropDown {
  .van-search__content {
    background-color: white;
  }
}
</style>
